<template>
  <el-dialog
    class="copy-record-comp"
    title="抄送记录"
    :close-on-click-modal="false"
    :visible="visible"
    :width="$setRem(1200)"
    :before-close="handleCancel">
    <div class="table-container">
      <el-row
        style="margin-bottom: 10px"
        type="flex"
        justify="space-between"
        align="middle">
        <el-col :span="12">
          状态：
          <el-select placeholder="请选择状态" v-model="readFlag">
            <el-option label="未读" value="0">未读</el-option>
            <el-option label="已读" value="1">已读</el-option>
          </el-select>
        </el-col>
        <el-col :span="12" :push="10">
          <el-button type="primary" size="medium" @click="handleViewAll">批量已读</el-button>
        </el-col>
      </el-row>
      <el-tabs class="tabs-container" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="计划信息" name="1">
          <el-table
            class="table-container"
            :data="tableData"
            v-loading="tableLoading"
            element-loading-custom-class="custom-load"
            @selection-change="handleSelectionChange"
            row-key="id">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="序号" type="index" width="70" align="center"></el-table-column>
            <el-table-column label="计划名称" prop="planName" align="center"></el-table-column>
            <el-table-column label="计划编号" width="120" prop="planNo" align="center"></el-table-column>
            <el-table-column label="填写时间" prop="writeTime" align="center"></el-table-column>
            <el-table-column label="原因" prop="reason" align="center" width="300" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.readFlag === '0'" class="btn" @click="handleView(scope.row)">已读</span>
              </template>
            </el-table-column>
            <div class="empty-content" slot="empty">
              <i class="iconfont iconwushuju"></i>
              <p>暂无数据</p>
            </div>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="反馈信息" name="2">
          <el-table
            class="table-container"
            :data="tableData"
            v-loading="tableLoading"
            element-loading-custom-class="custom-load"
            @selection-change="handleSelectionChange"
            row-key="id">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="序号" type="index" width="70" align="center"></el-table-column>
            <el-table-column label="材料名称" sortable prop="materialName" align="center"></el-table-column>
            <el-table-column label="规格/型号" width="120" sortable prop="specs" align="center"></el-table-column>
            <el-table-column label="单位" prop="unit" align="center"></el-table-column>
            <el-table-column label="计划数量" prop="planNum" align="center"></el-table-column>
            <el-table-column label="累计数量" prop="totalNum" align="center"></el-table-column>
            <el-table-column label="当前到场数量" prop="currentNum" align="center"></el-table-column>
            <el-table-column label="反馈人" prop="createUserName" align="center"></el-table-column>
            <el-table-column label="审核人" prop="reviewUserName" align="center"></el-table-column>
            <el-table-column label="计划进场时间" sortable prop="planApproachDate" align="center"></el-table-column>
            <el-table-column label="附件" show-overflow-tooltip sortable prop="modifyTime" align="center" width="140">
              <template slot-scope="scope">
                <div class="file-text">
                  <el-image
                    v-if="/\.jpg|\.jpeg|\.png$/.test(scope.row.fileUrl)"
                    class="img"
                    :src="$checkUrl(scope.row.fileUrl)"
                    :preview-src-list="[$checkUrl(scope.row.fileUrl)]">
                  </el-image>
                  <span
                    v-else
                    class="file-name"
                    :title="files(scope.row.fileUrl).name"
                    @click="handleUpload(scope.row.fileUrl)">
                {{ files(scope.row.fileUrl).name }}
              </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.readFlag === '0'" class="btn" @click="handleView(scope.row)">已读</span>
              </template>
            </el-table-column>
            <div class="empty-content" slot="empty">
              <i class="iconfont iconwushuju"></i>
              <p>暂无数据</p>
            </div>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <el-pagination
        v-if="total > 10"
        :page-size="pageSize"
        :current-page="pageNo"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleCancel">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      tableData: [],
      tableLoading: false,
      total: 0,
      pageSize: 10,
      pageNo: 1,
      hasSearch: false,
      statusOptions: {
        '1': '暂存',
        '2': '审核中',
        '3': '回退',
        '4': '审核完成'
      },
      readFlag: '0',
      activeName: '1',
      multipleSelection: []
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
    projectId() {
      return this.$store.state.currentProjectId;
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.getData();
        return;
      }
      this.clear();
    },
    readFlag(val) {
      val && this.getData();
    }
  },
  methods: {
    getData() {
      this.multipleSelection = [];
      if (this.activeName === '1') {
        this.getMaterialList();
        return;
      }
      this.getTableData();
    },
    // 获取计划列表
    async getMaterialList() {
      const params = {
        pageNum: this.pageNo,
        pageSize: this.pageSize,
        projectId: this.projectId,
        copyUser: this.userInfo.uuid,
        readFlag: this.readFlag,
      };
      this.tableLoading = true;
      const { success, data: {
        data
      }} = await this.$Model.getMaterialList(params);
      this.tableLoading = false;
      if (success && data) {
        this.tableData = data.list || [];
        this.total = data.total || 0;
      }
    },
    /**
     * 获取列表数据
     */
    async getTableData() {
      this.tableLoading = true;
      const params = {
        pageNum: this.pageNo,
        pageSize: this.pageSize,
        // projectId: this.projectId,
        copyUser: this.userInfo.uuid,
        readFlag: this.readFlag,
      };
      const { success, data: {
        data
      }} = await this.$Model.materialFeedbackList(params);
      this.tableLoading = false;
      if (success && data) {
        this.tableData = data.list || [];
        this.total = data.total || 0;
      }
    },
    // 清除参数
    clear() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.tableLoading = false;
      this.tableData = [];
      this.multipleSelection = [];
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getTableData();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getTableData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 附件
    files(fileUrl) {
      const fileNames = fileUrl ? fileUrl.match(/([^\/])+\.\w+$/) : '';
      const fileName = Array.isArray(fileNames) ? fileNames[0] : '';
      return {
        name: fileName,
        url: this.$checkUrl(fileUrl),
        hasImg: /\.jpg|\.jpeg|\.png$/.test(fileUrl)
      };
    },
    handleUpload(fileUrl) {
      fileUrl && window.open(this.$checkUrl(fileUrl));
    },
    handleClick(e) {
      this.activeName = e.name;
      this.clear();
      this.getData();
    },
    // 已读
    handleView(row) {
      this.readMaterialPlan({
        ids: row.id
      });
    },
    // 批量已读
    handleViewAll() {
      if (!this.multipleSelection.length) {
        return this.$message.warning('请勾选选项');
      }
      const ids = this.multipleSelection.map(v => v.id);
      this.readMaterialPlan({ ids });
    },
    // 阅读需求计划反馈
    async readMaterialPlan(params) {
      const { success } = this.activeName === '1'
        ? await this.$Model.readMaterialPlan(params)
        : await this.$Model.readPlanFeedBack(params);
      if (success) {
        this.$message.success('操作成功');
        this.getData();
      }
    },
    // 取消
    handleCancel() {
      this.$emit('cancel');
    },
  }
};
</script>

<style scoped lang="scss">
  @import "../../../assets/styles/dialog";

  .copy-record-comp {
    .table-container {
      /deep/ .el-table {
        height: 500px;
        .el-table__body-wrapper {
          height: calc(100% - 40px);
          overflow-y: auto;
          .file-name {
            width: 100%;
            display: inline-block;
            color: $mainColor;
            text-decoration: underline;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .img {
            width: 100px;
            height: 65px;
          }
          .btn {
            color: $mainColor;
            cursor: pointer;
          }
        }
      }
    }

    .tabs-container {
      /deep/ .el-tabs__item {
        color: #fff;
        &.is-active {
          color: #409EFF;
        }
      }
    }
  }
</style>
